<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Bootstrap 实例 - 边框表格</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <button type="button" class="btn btn-default" id="newadd" data-toggle="modal" data-target="#myModal3">增加</button>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>名称</th>
                <th>城市</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>Tanmay</td>
                <td>Bangalore</td>
                <td>
                    <button type="button" class="btn btn-danger">删除</button>
                    <button type="button" class="btn btn-info">修改</button>
                </td>
            </tr>
            <tr>
                <td>Sachin</td>
                <td>Mumbai</td>
                <td>
                    <button type="button" class="btn btn-danger">删除</button>
                    <button type="button" class="btn btn-info">修改</button>
                </td>
            </tr> -->
        </tbody>

    </table>

    <!-- 删除模态框 -->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">提示</h4>
                </div>
                <div class="modal-body">确认删除该条信息吗？</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="cancel">取消</button>
                    <button type="button" class="btn btn-primary" id="confirm1">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


    <!-- 修改模态框 -->
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">请填写信息</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="box1">
                        <div class="row">
                            <label for="" class="col-sm-3">ID：</label><input type="text" disabled>
                        </div>
                        <div class="row">
                            <label for="" class="col-sm-3">名称：</label><input type="text">
                        </div>
                        <div class="row">
                            <label for="" class="col-sm-3">城市：</label><input type="text">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirm2">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


    <!-- 新增模态框 -->
    <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">请填写信息</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="box2">
                        <div class="row">
                            <label for="" class="col-sm-3">ID：</label><input type="text">
                        </div>
                        <div class="row">
                            <label for="" class="col-sm-3">名称：</label><input type="text">
                        </div>
                        <div class="row">
                            <label for="" class="col-sm-3">城市：</label><input type="text">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirm3">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>



    <script>
        const data = [
            { id: 1, name: "李四", city: "重庆" },
            { id: 2, name: "张三", city: "成都" },
        ];


        function render(data) {
            $("tbody").empty();
            for (let i = 0; i < data.length; i++) {
                $("tbody").append(`<tr>
                <td>${data[i].name}</td>
                <td>${data[i].city}</td>
                <td>
                    <button type="button" class="btn btn-danger" data-id="${data[i].id}" id="delete" data-toggle="modal" data-target="#myModal1">删除</button>
                    <button type="button" class="btn btn-info" data-id="${data[i].id}" id="modify" data-toggle="modal" data-target="#myModal2">修改</button>
                </td>
            </tr>`)
            }
        }
        render(data);

        // 删除
        $("tbody").on("click", "#delete", function (event) {
            let dataId = $(event.target).attr("data-id");

            // 确认
            $("#confirm1").on("click", function () {
                for (let i = 0; i < data.length; i++) {
                    if (dataId == data[i].id) {
                        data.splice(i, 1);
                    }
                }
                $('#myModal1').modal('hide');
                render(data);
            })

            // 点击取消是 移除确认的click事件
            $("#cancel").on("click", function () {
                $("#confirm1").off("click");
            })
        })

        // 修改
        $("tbody").on("click", "#modify", function (event) {
            let dataId = $(event.target).attr("data-id");
            console.log(dataId);
            for (let i = 0; i < data.length; i++) {
                if (dataId == data[i].id) {
                    console.log(123);
                    $(".box1 input").eq(0).val(data[i].id);
                    $(".box1 input").eq(1).val(data[i].name);
                    $(".box1 input").eq(2).val(data[i].city);
                }
            }

            // 确认
            $("#confirm2").on("click", function () {
                for (let i = 0; i < $(".box1 input").length; i++) {
                    // 判空
                    if (!$(".box1 input").eq(i).val()) {
                        $("#myModal2").modal("hide");
                        return;
                    }
                }
                let id = $(".box1 input").eq(0).val();
                let name = $(".box1 input").eq(1).val();
                let city = $(".box1 input").eq(2).val();

                for (let i = 0; i < data.length; i++) {
                    if (data[i].id == id) {
                        data[i].id = id;
                        data[i].name = name;
                        data[i].city = city;
                    }
                }

                $("#myModal2").modal("hide");
                render(data);
            })

        })

        // 新增确认
        $("#confirm3").on("click", function() {
            for (let i = 0; i < $(".box2 input").length; i++) {
                if (!$(".box2 input").eq(i).val()) {
                    $(".box2 input").val("");
                    $("#myModal3").modal('hide');
                    return;
                }
            }
            let obj = {
                id: $(".box2 input").eq(0).val(),
                name: $(".box2 input").eq(1).val(),
                city: $(".box2 input").eq(2).val(),
            }
            data.push(obj);
            $(".box2 input").val("");
            $("#myModal3").modal('hide');
            render(data);
        })
    </script>
</body>

</html>